<template>
  <transition name="up">
      <div class="download vux-1px-t" v-show="showDownload" @click="download">
        <div class="download-cnt">
          <div class="pic">
            <img src="@/assets/images/logo.png" alt="">
            <p>RunStep</p>
            <span>跑步，记步 运动者的圈子</span>
          </div>
          <div class="download-img">
            <img src="@/assets/images/download.png" alt="">
          </div>
        </div>
      </div>
    </transition>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      scrollTop: 0,
      showDownload: true
    }
  },
  methods: {
    // 滚动事件
    handleScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop - this.scrollTop > 0) {
        this.showDownload = false
      } else {
        this.showDownload = true
      }
      this.scrollTop = scrollTop
    },
    // 下载app
    download () {
      let u = navigator.userAgent
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // g
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
      let url = ''
      if (isAndroid) {
        url = 'http://sj.qq.com/myapp/detail.htm?apkName=com.odun.odunRunning'
      } else if (isIOS) {
        url = 'https://itunes.apple.com/cn/app/%E6%AC%A7%E7%9B%BE%E9%85%B7%E8%B7%91/id1279128697?mt=8'
      } else {
        url = 'http://sj.qq.com/myapp/detail.htm?apkName=com.odun.odunRunning'
      }
      window.location.href = url
    }
  },
  mounted () {
    this.showDownload = this.show
    window.addEventListener('scroll', this.handleScroll) // 监听滚动事件
  }
}
</script>


<style lang="scss" scoped>
.download{
    padding: 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 999;
    .download-cnt{
      display: flex;
      .pic{
        flex: 1;
        img{
          width: 5rem;
          float: left;
          margin-right: 1rem;
        }
        p{
          padding-top: 0.6rem;
          font-size: 1.4rem;
        }
        span{
          display: inline-block;
          padding-top: 1rem;
          font-size: 1rem;
          color: #666;
        }
      }
      .download-img{
        width: 10rem;
        text-align: right;
        padding-top: 0.5rem;
        img{
          width: 4rem;
        }
      }
    }
  }
</style>
